<template>
  <div class="container">
    <!--    搜索框-->
    <div class="search-and-button-container">
    <el-autocomplete
        v-model="selectValue"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect"
        style="width: 300px;margin: 0 auto"
    >
      <template #default="{ item }">
        <span>{{ item.username }}</span>
      </template>
    </el-autocomplete>
      <el-button type="primary" @click="dialogVisible = true">切换身份</el-button>
      <component :is="AddGuideDialogComponent" v-model="dialogVisible" @close="handleClose"></component>
    </div>
    <!--    卡片页-->
    <div class="container">
      <!--    卡片页-->
      <div class="cards-container" v-if="selectedGuide" ref="cardsContainer" @scroll="checkScroll">
        <!-- 只显示前6张卡片，分成两行 -->
        <div class="cards-row" v-for="(cards, rowIndex) in visibleCards" :key="rowIndex">
          <el-card
              v-for="(card, cardIndex) in cards"
              :key="card.id"
              class="card"
              @click="showDetail(card)"
          >
            <div class="card-content">
              <div class="card-image">
                <img :src="avatar(card.imgUrl)" alt=""/>
              </div>
              <div class="card-text">
                <div class="rating">{{card.rating}}</div>
                <el-rate
                    v-model="card.stars"
                    :max="5"
                    allow-half
                    disabled
                    :colors="['#ff9900', '#ff9900']"
                ></el-rate>
                <div><span><el-icon><User /></el-icon></span><h3>{{ card.username }}</h3></div>
                <hr>
                <div><span><el-icon><Phone /></el-icon></span>{{card.phone}}</div>
                <hr>
                <!-- 这里可以添加更多内容 -->
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <!--    对应卡片详情-->
      <div class="box-card" v-else="selectedGuide">
        <el-card class="Detail-card">
          <!--      左边-->
          <div style="width: 50%;float:left;height: 100%;margin:0;">
            <!--        加载图片-->
            <div style="height: 150px;width: 100%; ">
<!--              插入图片-->
              <div class="box-image">
                <img :src="avatar(saveGuideComment.imgUrl)" alt="加载失败">
              </div>
              <!--              显示导游自我描述-->
<!--              关注按钮-->
              <div>
              <div class="box-text">
                <div v-if="follow==false" style="position: absolute;margin-left: 330px;margin-top: 15px;">
                    <el-button @click="butUser(saveGuideComment.id)" style="width: 88px;position:relative;float: right;right: 25px" color="#a0cfff" class="follow" >关注</el-button>
                </div>
                <div v-if="follow == true " style="position: absolute;margin-left: 330px;margin-top: 15px;">
                  <el-button @click="butUser(saveGuideComment.id)" style="width: 88px;position: relative;float: right;right: 25px;" color="#c8c9cc" class="unFollow">取消关注</el-button>
                </div>
                <div>{{saveGuideComment.email}}</div>
                <div>{{saveGuideComment.introduction}}</div>
              </div>
              </div>
            </div>
            <div>
              <!--              导游姓名-->
              <div style="height: 40px;background-color: #258e39"><h3>{{ saveGuideComment.username }}</h3></div>
              <!--              使用评分-->
              <div>
                <el-rate 
                    allow-half size="large" 
                    :max="5" 
                    v-model="guideRatingState.rating" 
                    @change="handleRatingChange(guideRatingState.rating)" 
                    :disabled="guideRatingState.rated"
                ></el-rate>
                <p>{{ saveGuideComment.rating}}</p>
              </div>
              <p>{{ "当前用户评分为：" + guideRatingState.rating*2 }}</p>
            </div>
            <!-- 评价部分 -->
            <el-input type="textarea" v-model="saveGuideComment.comment" placeholder="请输入您的评价"
                      :show-word-limit="true" maxlength="50" style="height: 70px"></el-input>
            <el-button @click="submitReview()">提交评价</el-button>
            <el-button @click="uncomment()">返回</el-button>
          </div>
          <!--        右边-->
          <div style="height: 440px;width: 50%;float:right;margin: 0;overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none;">
            <!-- 评价部分 -->
            <div v-for="review in reviews" :key="review.id" @scroll="checkScroll1">
              <div style="display: flex; align-items: center;">
                <div class="avatar">
                  <img src="" alt="用户小头像">
                </div>
                <div class="info">
                  <div class="username">{{ review.user }}</div>
                  <div class="date">{{ review.date }}</div>
                  <div class="content">{{ review.content }}</div>
                </div>
              </div>
              <hr/>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!--    两侧标签-->
    <!-- 调整宽度并使用 Flexbox 布局 -->
    <div class="order-container">
      <!-- 使用 el-collapse 和 el-form 来创建订单 -->
      <el-collapse v-model="activePanel" accordion style="min-width: 1200px;">
        <el-collapse-item
            v-for="(guide, index) in searchedGuides"
            :key="guide.id"
            :title="'导游：'+guide.username"
            :name="index"
        >
          <el-form :model="orderForm" label-width="120px">
            <!-- 导游名 -->
            <el-form-item label="导游名">
              <el-input v-model="orderForm.guideName" disabled>
                <template #prepend>{{ guide.username }}</template>
              </el-input>
            </el-form-item>

            <!-- 电话号码 -->
            <el-form-item label="电话号码">
              <el-input v-model="orderForm.phone" disabled>
                <template #prepend>{{ user.phone }}</template>
              </el-input>
            </el-form-item>

            <!-- 用户名 -->
            <el-form-item label="用户名">
              <el-input v-model="orderForm.userName" disabled>
                <template #prepend>{{ user.username }}</template>
              </el-input>
            </el-form-item>

            <!-- 预约时间 -->
            <el-form-item label="预约时间">
              <el-date-picker
                  v-model="orderForm.startDate"
                  type="datetime"
                  placeholder="选择开始时间"
                  size="small"
                  :clearable="false"
              />
              <el-date-picker
                  v-model="orderForm.endDate"
                  type="datetime"
                  placeholder="选择结束时间"
                  size="small"
                  :clearable="false"
                  :picker-options="{ disabledDate(time) { return time.getTime() < orderForm.startDate.getTime(); } }"
              />
            </el-form-item>

            <!-- 景点 -->
            <el-form-item label="景点">
              <el-select v-model="orderForm.scene" placeholder="请选择景点">
                <el-option
                    v-for="scene in scenes"
                    :key="scene.id"
                    :label="scene.name"
                    :value="scene.id"
                />
              </el-select>
            </el-form-item>

            <!-- 创建订单按钮 -->
            <el-form-item>
              <el-button type="primary" @click="createOrder()">创建订单</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, reactive} from 'vue'
import {ElMessage} from "element-plus";
import AddGuide from "@/views/guide/AddGuide.vue";
import axios from "axios";
import qs from "qs";
import {useRoute} from "vue-router";
import router from "@/router";

//头像路径
const avatar = (imgUrl)=>{
  let url = BASE_URL+imgUrl;
  return url;
}
// 用户名示例（实际应用中应从登录状态中获取）
const user  = ref(getUser());

const dialogVisible = ref(false);
const AddGuideDialogComponent = AddGuide;
const handleClose = ()=>{
  dialogVisible.value = false;
};

// 订单表单数据
const orderForm = ref({
  guideName: '',
  phone: '',
  userName: '',
  startDate: null,
  endDate: null,
  scene: ''
});


//现在我需要通过查询来维护导游信息，那么我需要加载的数据是，图片、姓名、性别、 电话、评分（按照评分高低）、邮箱、年龄、评价
//用于接收导游信息
const cardsGuide = ref([])
//按照评分查找信息，所以没有问题。
const selectCardInfo = (route)=>{
  axios.get(BASE_URL+"/yyt/guide/selectOrder").then(response=>{
    if (response.data.code==2000){
      ElMessage.success("已刷新");
      // 在加载数据后，立即处理数组，添加stars属性
      const processedCards = response.data.data.map(card => ({
        ...card,
        stars: card.rating / 2
      }));
      cardsGuide.value =processedCards;
      if (typeof rID.value !== 'undefined') {
        // 遍历visibleCards数组
        for (let i = 0; i < cardsGuide.value.length; i++) {
          // 检查当前对象的id是否与传入的id匹配
          if (cardsGuide.value[i].id == rID.value) {
            // 找到匹配的对象，将其card数据传递给showDetail函数
            let card = cardsGuide.value[i];
            showDetail(card);
            break;
          }
        }
      }
    }else{
      ElMessage.error("你的查询是有问题的吧！")
    }
  })

};



const seances = ref(
    [
      {img:"/imgs/guide/sence/djy.png"},
      {img:"/imgs/guide/sence/hd.png"},
      {img:"/imgs/guide/sence/fphj.png"},
      {img:"/imgs/guide/sence/qyhs.png"},
    ]
);

// 假设您有评价数据，存储在一个数组中
const guideComments = ref([
  { text: '导游讲解很生动！', time: '2023-04-01 12:00' },
  { text: '服务态度非常好！', time: '2023-04-01 12:05' },
  // 更多评价...
]);


// 定义了绑定值 
const selectValue = ref("");



// 在setup中定义一个状态来存储当前选中的导游信息---tap组件使用
const selectedGuideInfo = ref({});

//搜索方法
const handleSelect =(item)=>{
  selectValue.value=item.value;
}
// 计算属性，用于过滤卡片数据
const filteredCards = computed(() => {
  if (!selectValue.value) {
    // 如果搜索框为空，则显示所有卡片
    return cardsGuide.value;
  }
  // 根据导游名模糊匹配卡片
  return cardsGuide.value.filter(card => card.username.toLowerCase().includes(selectValue.value.toLowerCase()));
});

const visibleCards = computed(() => {
  // 基于搜索结果的过滤卡片
  const filtered = filteredCards.value;

  // 分组，每组最多三张卡片，不足的不填充，直接展示实际数量
  const grouped = [];
  for (let i = 0; i < Math.ceil(filtered.length / 3); i++) {
    const start = i * 3;
    grouped.push(filtered.slice(start, start + 3));
  }

  // 确保即使最后一组卡片数量不足，也能正常显示，不导致布局错乱
  // 通过在最后一组补足空位或调整容器样式来维持固定高度，这里直接返回已分组的卡片
  return grouped.slice(0, visibleRows.value);
});

//新方法
// 初始只显示两行卡片  
const initialRows = 2;
const visibleRows = ref(initialRows);

// 假设chunkedCards是已经分好组的卡片（每行三张）  
const chunkedCards = computed(() => {
  // 这里简单模拟分组，实际中你可能需要根据你的卡片数据来分组  
  const chunkSize = 3;
  return cardsGuide.value.reduce((chunks, card, index) => {
    const chunkIndex = Math.floor(index / chunkSize);

    if (!chunks[chunkIndex]) {
      chunks[chunkIndex] = [];
    }

    chunks[chunkIndex].push(card);
    return chunks;
  }, []);
});


// 滚动容器的引用  
const cardsContainer = ref(null);

// 滚动事件处理函数  
function checkScroll() {
  const {scrollTop, clientHeight, scrollHeight} = cardsContainer.value;
  if (scrollTop + clientHeight >= scrollHeight - 50) { // 接近底部时加载更多，50是阈值  
    if (visibleRows.value * 3 < cardsGuide.value.length) {
      visibleRows.value++; // 每次增加一行  
    }
  }
}

// 组件挂载后，确保至少有两行卡片可见  
onMounted(() => {
  // loadGuide();
  if (chunkedCards.value.length > 0) {
    visibleRows.value = Math.min(initialRows, chunkedCards.value.length);
  }
});


// 定义一个加载导游的方法，使用option存储


// 模糊搜索函数  
const querySearch = (queryString, cb) => {
  const results = cardsGuide.value.filter(item => item.username.toLowerCase().indexOf(queryString.toLowerCase()) > -1).slice(0, 5)
  // 调用 callback 返回建议列表的数据
  cb(results);
  console.log(queryString);

}

const selectedGuide = ref(true);

// 详情页信息 ,当我点击显示卡片详情时，加载的数据，
const saveGuideComment = ref({
});


// 定义一个对象来管理当前导游的评分状态
const guideRatingState = reactive({
  rating: null,
  rated: false
});

//定义一个对象来管理当前游客id、导游id、评分
const changeInfo = ref(
    {touristId:'',guideId:'',rating:''}
);

//在组件加载时获取评分信息
/*onMounted(()=>{
  checkRatingStatus();
});*/

//获取评分信息
/*const checkRatingStatus = ()=>{
  axios.get(BASE_URL+"yyt/guide/reviews/status?touristId="+user.id+"&guideId="+saveGuideComment.id).then(response=>{
    console.log(user.id+saveGuideComment.id);
    if (response.data.code==2000){
      //设置评分组件的初始值
      guideRatingState.rating = response.data.rating;
      //设置是已评分
      guideRatingState.rated = response.data.rated;
      ElMessage.success("成功有的信息")
    }else{
      ElMessage.error("很明显有问题")
    }
  });
}*/
//用于当游客点击评分组件向后端提交评分数据
const handleRatingChange =(rating)=>{
  if (guideRatingState.rated){
    ElMessage.warning("你已经评论过了")
    return;
  }
  
  // 更新当前导游的评分状态
  guideRatingState.rating = rating;
  guideRatingState.rated = true;
  
  changeInfo.value.guideId = saveGuideComment.value.id;
  changeInfo.value.rating = rating*2;
  changeInfo.value.touristId=user.value.id;
  let data = qs.stringify(changeInfo.value);
  console.log(data);
  axios.post(BASE_URL+"/yyt/guide/reviews",data).then(response => {
    if (response.data.code==2000){
      ElMessage.success("评价成功");
      guideRatingState.rated = false;
    }else{
      ElMessage.error("评论数据有问题")
    }
  })
  
};
const follow = ref('');
//点击显示详情页，我将导游的信息传递到了card上，再将属性
const showDetail = (card) => {
  console.log("card中的数据",card);
  selectedGuide.value = false;
  saveGuideComment.value = card;
  console.log(saveGuideComment.value);

  // 清空或重置评分状态，以便加载新导游的评分信息
  guideRatingState.rating = null;
  guideRatingState.rated = false;

  // 调用后端API检查评分状态
  // checkRatingStatus();
  getUserFollow(saveGuideComment.value.id);

  // 可选：从localStorage或sessionStorage恢复状态
  const ratedStatus = localStorage.getItem(`rated-${saveGuideComment.value.id}`);
  if (ratedStatus === 'true') {
    guideRatingState.rated = true;
  }
}
//定义对象保存导游id和用户id数据
const userIdData = ref({id:'',fid:''})
//获取当前导游是否被关注
const getUserFollow = (id)=>{
  userIdData.value.id=id;
  userIdData.value.fid=user.value.id;
  let data = qs.stringify(userIdData.value);
  axios.post(BASE_URL+'/yyt/like/guide',data).then((response)=>{
    if (response.data.code==2000){
      follow.value = response.data.data;
    }else {
      ElMessage.error("错误");
    }
  })
}
//定义决定是否关注/取消关注的方法
const butUser = (id) =>{
  if (follow.value==true){
    deleteFollowUser(id);
    follow.value = !follow.value;
  }else if (follow.value==false){
    updateFollowUser(id);
    follow.value = !follow.value;
  }
}
//取消关注连接后端方法
const deleteFollowUser = (id)=>{
  userIdData.value.id=id;
  userIdData.value.fid=user.value.id;
  let data = qs.stringify(userIdData.value);
  axios.post(BASE_URL+'/yyt/like/user/delete/',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success("取消关注成功");
    }else {
      ElMessage.error("操作失败");
    }
  })
}
// 关注连接后端方法
const updateFollowUser = (id)=>{
  userIdData.value.id=id;
  userIdData.value.fid=user.value.id;
  let data = qs.stringify(userIdData.value);
  axios.post(BASE_URL+'/yyt/like/user/update/',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success("关注成功");
    }else {
      ElMessage.error("操作失败");
    }
  })
}
onMounted(() => {
  const route = useRoute();
  selectCardInfo(route);
  rID.value = route.query.id;
});
const rID = ref();
//根据id查询导游数据

//显示的评分

//详情页返回
const uncomment = () => {
  selectedGuide.value = true;
  if (typeof rID.value !== 'undefined'){
    router.push({ path: '/like'});
  }
}

//定义实时加载评分的对象
const guideRating = ref(0);

//提交评价数据
const submitReview = () => {

}




// 场景示例数据
const scenes = ref([
  { id: 1, name: '故宫' },
  { id: 2, name: '长城' },
  // ...更多景点
]);

// 默认展开第一个折叠信息
const activePanel = ref(0);

// 预约起始时间
const startDate = ref('');

// 预约结束时间
const endDate = ref('');

// 处理起始时间变化，确保结束时间不能早于起始时间
const handleStartDateChange = (val) => {
  endDate.value = val; // 可以选择性地将起始时间赋值给结束时间作为默认值
};

// 选定的日期
const selectedDate = ref('');

// 选定的景点
const selectedScene = ref('');

// 选择导游的处理函数
const selectGuide = (guide) => {
  selectedGuide.value= false;
  ElMessage.success(`选择了导游: ${guide.text}`);
  // 实际应用中可能需要在此处执行导游选择后的逻辑，比如记录选择的导游ID
};

// 创建订单的模拟函数
const createOrder = () => {
  if (!selectedDate.value || !selectedScene.value) {
    ElMessage.warning('请选择时间和景点！');
    return;
  }
  ElMessage.success('订单创建成功！');
  // 实际应用中应发起创建订单的请求等操作
};

const isSingleResult = ref(false);

// 处理搜索结果，确保最多展示五个导游，并在只有一个结果时展开
const searchedGuides = computed(() => {
  const filtered = filteredCards.value.slice(0, 5); // 最多展示五个
  isSingleResult.value = filtered.length === 1; // 判断是否只有一个结果
  return filtered;
});


onMounted(() => {
  // 默认展开第一个折叠面板
  if (cardsGuide.value.length > 0) {
    activePanel.value = ['1']; // 假设只有一个面板，且索引为0
  }
});



// 省略其他数据
const reviews = ref([
  { id: 1, user: '用户1', content: '这是一个很好的导游，我很满意这次旅行。', date: '2023-04-01' },
  { id: 2, user: '用户2', content: '导游知识丰富，讲解详细，强烈推荐！', date: '2023-04-02' },
  { id: 2, user: '用户2', content: '导游知识丰富，讲解详细，强烈推荐！', date: '2023-04-02' },
  { id: 2, user: '用户2', content: '导游知识丰富，讲解详细，强烈推荐！', date: '2023-04-02' },
  { id: 2, user: '用户2', content: '导游知识丰富，讲解详细，强烈推荐！', date: '2023-04-02' },
  { id: 2, user: '用户2', content: '导游知识丰富，讲解详细，强烈推荐！', date: '2023-04-02' },
  { id: 2, user: '用户2', content: '导游知识丰富，讲解详细，强烈推荐！', date: '2023-04-02' },
  { id: 2, user: '用户2', content: '导游知识丰富，讲解详细，强烈推荐！', date: '2023-04-02' },
  { id: 2, user: '用户2', content: '导游知识丰富，讲解详细，强烈推荐！', date: '2023-04-02' },
  // 更多评论...
])
// 省略其他数据

// 模拟加载更多评论的方法
async function fetchMoreReviews() {
  // 这里你可以从服务器获取更多的评论数据
  const moreReviews = await fetch(`/api/reviews/${selectedGuide.value.id}?offset=${reviews.value.length}`)
      .then(response => response.json())
      .catch(error => console.error('Error fetching reviews:', error))

  // 将新的评论数据追加到已有评论中
  reviews.value.push(...moreReviews)
}

// 滚动事件处理函数
function checkScroll1() {
  const { scrollTop, clientHeight, scrollHeight } = cardsContainer.value;
  if (scrollTop + clientHeight >= scrollHeight - 50) { // 接近底部时加载更多，50是阈值
    if (reviews.value.length < selectedGuide.value.reviews.length) { // 如果还有未加载的评论，则加载更多
      fetchMoreReviews()
    }
  }
}


</script>

<style scoped>
.search-and-button-container {
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中子元素 */
  justify-content: space-between; /* 水平方向上，子元素之间的空间平均分布，将按钮推到右边 */
  /* 可以添加宽度、内边距等样式 */
  width: 100%; /* 如果需要，可以设置容器的宽度 */
  padding: 10px; /* 可选，为容器添加内边距 */
}




.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; /* 根据需要设置容器高度 */
}


.cards-container {
  /* 设置滚动条样式 */
  overflow-y: auto;
  max-height: 438px; /* 设置容器高度，根据实际需求调整 */
  scrollbar-width: none; /* 设置细滚动条 */
  min-height: calc(2 * (200px + 19px));
}


.cards-row {
  display: flex;
  justify-content: space-between; /* 卡片之间添加间隔 */
  margin-bottom: 20px; /* 行与行之间的间距 */
}

.card {
  height: 200px; /* 设置卡片高度为300px */
  width: 400px; /* 设置卡片宽度为400px */
  margin-right: 20px; /* 保持卡片之间的间隔（如果需要）*/
  box-sizing: border-box; /* 包括padding和border在内 */
  /* 其他样式属性保持不变或按需添加 */
  background-color: #dfeaf9; /* 柔和的背景色 */
  border-radius: 10px; /* 圆角 */
  transition: all 0.2s ease-in-out; /* 过渡效果 */
  background-image: url("../../assets/guide/bjt.png");
}

.cards-row .card:last-child {
  margin-right: 0; /* 每行最后一个卡片不需要右边距 */
}

.card:nth-child(3n) {
  margin-right: 0; /* 每行的第三张卡片不需要右边距 */
}

.card-content {
  display: flex;
  align-items: flex-start; /* 内容垂直对齐方式 */
  padding: 10px; /* 可选：添加内边距 */
}

.card-image img {
  width: 150px; /* 假设图片宽度为100px，你可以根据需要调整 */
  height: 150px; /* 图片高度自动缩放 */
  margin-right: 20px; /* 图片与文字之间的间隔 */
  display: block;
  border-radius: 50%;
}

.card-text {
  flex: 1; /* 文本内容占据剩余空间 */
  position: relative;
}

/*评分样式*/
.rating{
  position: absolute;
  top: 5px;
  right: 5px;
  color: yellow;
}


/*卡片详情*/
.box-card {
  width: 1240px;
  height: 440px;
  padding: 0;
}
/*详情卡片页*/
.Detail-card{
  background-image: url("../../assets/guide/bjt1.png");
  background-size: cover;
  background-color: #dfeaf9; /* 柔和的背景色 */
  border-radius: 10px; /* 圆角 */
}

/*卡片详情图片大小*/
.box-image > img {
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 50%;
  float: left;
}

.box-text {
  float: right;
  width: 409px;
  height: 150px;
  background-color: #3C82F5;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使图片填充容器并保持宽高比 */
}

.order-container {
  display: flex;
  justify-content: center;
  max-width: 1200px; /* 或者其他适合的宽度 */
  margin-top: 20px; /* 自动居中 */
}

.avatar {
  margin-right: 8px;
}

.info {
  flex: 1;
}

.username {
  font-weight: bold;
}

.date {
  color: #999;
}

.content {
  margin-top: 4px;
}
.unFollow{
  color: #606266;
}
.follow{
  color: #fff;
}
</style>